<template>
  <div class="profile-warp">
    <el-row type="flex" justify="center">
      <el-col :span="18">
        <el-tabs tab-position="left" style="min-height: 840px;padding:10px;">
          <el-tab-pane><span slot="label"><i class="el-icon-user"></i>个人信息</span><personalInfo></personalInfo></el-tab-pane>
          <el-tab-pane><span slot="label"><i class="el-icon-document"></i>我的文章</span><myArticle></myArticle></el-tab-pane>
          <el-tab-pane><span slot="label"><i class="el-icon-collection-tag"></i>我的文章标签</span><myTag></myTag></el-tab-pane>
          <el-tab-pane><span slot="label"><i class="el-icon-setting"></i>设置</span><h3 class="profile-label">更改密码</h3><changePassword></changePassword><div class="loginout-warp"><el-button type="primary" class="loginout-btn" @click="loginOut">退出登录</el-button></div></el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import personalInfo from '@/components/profileComponents/personalInfo';
import myArticle from '@/components/profileComponents/myArticle';
import myTag from '@/components/profileComponents/myTag';
import changePassword from '@/components/profileComponents/changePassword';
export default {
    name:"profile",
    components:{
      personalInfo,
      myArticle,
      myTag,
      changePassword
    },
    methods:{
      loginOut(){
        let _that=this;
        if(this.$store.getters.getIsLogin){
          //清除cookies
          if(this.$cookies.isKey("currentUserId")){
            this.$cookies.remove("currentUserId");
          }
          //清除vuex里的东西
          this.$store.commit({
            type:"setCurrentUser",
            userInfo:null
          });
          this.$store.commit({
            type:"setIsLogin",
            isLogin:false
          });
          this.$store.commit({
            type:"setToken",
            token:""
          });
        }
        this.$message({
          message: '退出账号成功',
          type: 'success'
        });
        setTimeout(function(){
          _that.$router.push("/home");
        },1000);
      }
    }
}
</script>

<style>
.profile-warp {
  margin: 20px 0;
}
.loginout-btn {
  width: 100%;
}
.loginout-warp {
  margin-top: 20px;
}
.user-profile-warp {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  min-height: 700px;
}
.profile-label {
  padding-left: 20px;
  border-left: 5px solid #FF69B4;
  margin: 10px 0;
}
</style>